[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground", secondary: "border-transparent bg-secondary text-secondary-foreground", destructive: "border-transparent bg-destructive text-destructive-foreground", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]png:file="public/diverse-user-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-user-avatars-jNaliJbW5b5ccprrlYjj99XE0SOY9L.png" isMerged="true" [V0_FILE]png:file="public/legions-developer-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/legions-developer-avatar-thMVBcwVkndl1NAwBoBpqK0Ck6WVOu.png" isMerged="true" [V0_FILE]typescriptreact:file="components/ui/card.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type * as React from "react" import { cn } from "@/lib/utils" function Card({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return

} function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return

} function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return

} function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return

} export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/github-header.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" const GitHubIcon = () => ( ) const navigationItems = [ "Overview", "Integrations", "Deployments", "Activity", "Domains", "Usage", "Observability", "Storage", "Flags", "AI Gateway", "Support", "Settings", ] export function GitHubHeader() { const [activeTab, setActiveTab] = useState("Overview") return (

{/* Top section with logo and project info */}

legions

Hobby

{/* Navigation tabs */}

{navigationItems.map((item) => ( ))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { redirect } from "next/navigation" export default function HomePage() { redirect("/code") } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, JetBrains_Mono } from "next/font/google" import "./globals.css" import { RepositoryHeader } from "@/components/repository-header" const geist = Geist({ subsets: ["latin"], display: "swap", variable: "--font-geist", }) const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], display: "swap", variable: "--font-jetbrains-mono", }) export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; /* Fixed @custom-variant syntax - removed body content */ @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { /* Setting Geist as the default sans font instead of Figtree */ --font-sans: var(--font-geist); /* Setting JetBrains Mono as the mono font */ --font-mono: var(--font-jetbrains-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } .jetbrains { font-family: var(--font-jetbrains-mono) } [V0_FILE]png:file="public/legion-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/legionlogo-WdOfVnC8RWzeO0tqKGczqGlpZYLomc.png" isMerged="true" [V0_FILE]png:file="public/developer-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/developer-avatar-oCTfz3xW8chKIjWdSoF5hoJl9AKlr7.png" isMerged="true" [V0_FILE]png:file="public/developer-with-glasses.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/developer-with-glasses-S1pWV5AHhueHTcKw4qB5TmnIKgawRP.png" isMerged="true" [V0_FILE]typescriptreact:file="app/code/page.tsx" isMerged="true" import { RepositorySidebar } from "@/components/repository-sidebar" import { FileExplorer } from "@/components/file-explorer" import { ReadmeSection } from "@/components/readme-section" export default function CodePage() { return (

Invoicely Repo

) } [V0_FILE]typescriptreact:file="app/issues/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/actions/page.tsx" isMerged="true" import { Construction } from "lucide-react" export default function ActionsPage() { return (

Actions

This page is currently under development.

) } [V0_FILE]typescriptreact:file="app/projects/page.tsx" isMerged="true" import { Construction } from "lucide-react" export default function ProjectsPage() { return (

Projects

This page is currently under development.

) } [V0_FILE]typescriptreact:file="app/wiki/page.tsx" isMerged="true" import { Construction } from "lucide-react" export default function WikiPage() { return (

Wiki

This page is currently under development.

) } [V0_FILE]typescriptreact:file="app/settings/page.tsx" isMerged="true" import { Construction } from "lucide-react" export default function SettingsPage() { return (

Settings

This page is currently under development.

) } [V0_FILE]typescriptreact:file="app/pull-requests/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/file-explorer.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { File, Folder, GitBranch, Tag, Code, FolderOpen, Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" const files = [ { name: "docs", type: "folder", message: "Update API reference docs", time: "2 days ago" }, { name: "images", type: "folder", message: "Add project logo and demo screenshots", time: "2 days ago" }, { name: "invoicely", type: "folder", message: "Implement upgrade and fix client service", time: "3 months ago" }, { name: "Procfile", type: "file", message: "Procfile: heroku config files", time: "3 months ago" }, { name: "invoicely.sql", type: "file", message: "Implement upgrade and fix client service", time: "3 months ago" }, { name: "requirements.txt", type: "file", message: "Implement upgrade and fix client service", time: "3 months ago" }, { name: "run.py", type: "file", message: "Implement upgrade and fix client service", time: "3 months ago" }, { name: "settings", type: "folder", message: "Create settings for the admin", time: "3 months ago" }, { name: "migrations", type: "folder", message: "Implement upgrade and fix client service", time: "3 months ago" }, { name: "app.py", type: "file", message: "Bug fix: users not for signing", time: "3 days ago" }, { name: "admin.py", type: "file", message: "Implement upgrade and fix client service", time: "3 months ago" }, { name: "apps.py", type: "file", message: "Implement upgrade and fix client service", time: "3 months ago" }, { name: "forms.py", type: "file", message: "Implement upgrade and fix client service", time: "3 months ago" }, { name: "models.py", type: "file", message: "Implement upgrade and fix client service", time: "3 months ago" }, { name: "admin", type: "folder", message: "Implement admin create page", time: "3 months ago" }, { name: "authentication", type: "folder", message: "Implement authentication and creation page with...", time: "3 months ago", }, { name: "LICENSE", type: "file", message: "Initial commit", time: "3 months ago" }, { name: "GLCODE.md", type: "file", message: "By adding", time: "just now" }, { name: "env-sample", type: "file", message: "Implement upgrade and fix client service", time: "3 months ago" }, { name: "build.json", type: "file", message: "for initial repo and setup", time: "2 weeks ago" }, { name: "manage.json", type: "file", message: "for initial repo and setup", time: "2 weeks ago" }, ] export function FileExplorer() { return (

main

1 branch

0 tags


      
        
          
            
              
                
                HD
              
              
                heyrico design
                Initial Commit
              
            
            
              00aef13n
              
                
                3 commits
              
            
          
        

        
          {files.map((file, index) => (
            
              
                
                  {file.type === "folder" ? (
                    
                  ) : (
                    
                  )}
                
                
                  {file.name}
                
              
              
                {file.message}
              
              
                {file.time}
              
            
          ))}


  )
}
[V0_FILE]typescriptreact:file="components/repository-sidebar.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { LinkIcon, Settings, Book, Shield, Activity, Star, Eye, GitFork, CheckCircle, Circle } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export function RepositorySidebar() {
  return (
    
      
        
          About
          
            
          
        

        
          Invoicely is a simple and easy to use invoice generator where you can create beautiful and professional
          invoices in minutes. ~ Proudly OSS
        

        
          
          
            invoicely.gg
          
        

        
          
            git
          
          
            cli
          
          
            javascript
          
          
            nextjs latest
          
          
            github-api-v4
          
        

        
          
            
            Readme
          
          
            
            Apache-2.0 license
          
          
            
            Security policy
          
          
            
            Activity — 152 commits
          
          
            
            33.9k
            stars
          
          
            
            858
            watching
          
          
            
            5.7k
            forks
          
        

        
      

      
        
          Contributors
          
            1
          
        

        
          
            
            
              legions-developer
              Legion
            
          
        
      

      
        
          Deployments
          
            252
          
        

        
          
            
            Preview
            1 day ago
          

          
            
            Production
            3 days ago
          
        
      

      
        Languages

        
          
            
              
            
          

          
            
              
              TypeScript
              93.3%
            

            
              
              MDX
              5.3%
            

            
              
              Other
              1.4%
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/readme-section.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { FileText, Maximize2, Edit } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export function ReadmeSection() {
  return (
    
      
        
          
          README.md
        
        
          
        
      
      
        
          
            Invoicely Open Source
            
              A modern, responsive website template built with{" "}
              HTML, CSS, and JavaScript.
            
          
          
            
              Html
            
            TS
            JS
          
        

        
          Invoicely - (Contributions Accepted)
          
            Modern, open-source invoice generator platform built with Next.js, PDF, and TypeScript.
          
        

        
          
            🚀
            Quick Start
          

          
            
              Prerequisites
              
                
                  Node.js - 18 or higher
                
                
                  React 18 - UI library
                
                
                  PostgreSQL - Database for storing application data
                
              
            

            
              Installation

              
                
                  1. Clone the repository
                  
                    git clone https://github.com/legions-developer/invoicely.git
                    
                  
                

                
                  2. Install dependencies
                  
                    npm install
                    
                  
                

                
                  3. Set up environment variables
                  
                    # Create .env.local file in root directory
                    # Add required environment variables below
                    NEXT_PUBLIC_APP_URL=http://localhost:3000
                    DATABASE_URL=your_database_url
                    
                  
                

                
                  4. Set up the database
                  
                    # Generate database schema
                    npm run db:generate
                    # Run migrations
                    npm run db:migrate
                    
                  
                

                
                  5. Start development server
                  
                    npm dev
                    
                  
                
              
            
          
        

        
          
            🛠️
            Tech Stack
          

          
            
              Core Framework
              
                
                  Next.js 15.1 - React framework with App Router
                
                
                  React 18 - UI library
                
                
                  TypeScript 5.6.3 - Type-safe JavaScript
                
              
            

            
              API & State Management
              
                
                  tRPC 11.1.2 - End-to-end type APIs
                
                
                  TanStack Query 5.76.1 - Server state management
                
                
                  Zod 3.24.1 - Schema validation
                
              
            

            
              UI & Styling
              
                
                  Tailwind CSS 4 - Utility CSS framework
                
                
                  Radix UI - Headless UI components
                
                
                  Lucide React - Icon library
                
                
                  Next Themes - Theme management
                
              
            

            
              Database & Authentication
              
                
                  Drizzle ORM 0.38.1 - Type-safe database ORM
                
                
                  Neon Database - Serverless PostgreSQL
                
                
                  Google OAuth - Social authentication
                
              
            

            
              File Storage & PDF
              
                
                  Cloudflare R2 - Object storage
                
                
                  React PDF 8.2.1 - PDF generation
                
              
            

            
              Development Tools
              
                
                  Turbo 2.3.3 - JavaScript build system
                
                
                  Prettier 3.4.2 - Code formatting
                
                
                  Husky 9.1.7 - Git hooks
                
              
            

            
              Analytics & Monitoring
              
                
                  PostHog - Product analytics
                
                
                  OpenPanel - Privacy-focused analytics
                
                
                  React Scan - Performance debugging
                
              
            

            
              Utilities
              
                
                  Date-fns 4.1.0 - Date manipulation
                
                
                  Decimal.js 10.4.3 - Arbitrary precision arithmetic
                
                
                  UUID 11.0.3 - Unique identifier generation
                
              
            
          
        

        
          📁 Project Structure
          
                          invoicely/
              ├── app/
              │ ├── api/
              │ ├── dashboard/
              │ └── globals.css
              ├── components/
              ├── lib/
              ├── public/
              └── README.md
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
  React.ElementRef,
  React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
  
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

const sheetVariants = cva(
  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  },
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef,
    VariantProps {}

const SheetContent = React.forwardRef, SheetContentProps>(
  ({ side = "right", className, children, ...props }, ref) => (
    
      
      
        {children}
        
          
          Close
        
      
    
  ),
)
SheetContent.displayName = SheetPrimitive.Content.displayName

const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (
  
)
SheetHeader.displayName = "SheetHeader"

const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (
  
)
SheetFooter.displayName = "SheetFooter"

const SheetTitle = React.forwardRef<
  React.ElementRef,
  React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
  
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

const SheetDescription = React.forwardRef<
  React.ElementRef,
  React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
  
))
SheetDescription.displayName = SheetPrimitive.Description.displayName

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef,
  React.ComponentPropsWithoutRef & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  
    {children}
    
  
))
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef,
  React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
  
))
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef,
  React.ComponentPropsWithoutRef
>(({ className, sideOffset = 4, ...props }, ref) => (
  
    
  
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef,
  React.ComponentPropsWithoutRef & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef,
  React.ComponentPropsWithoutRef
>(({ className, children, checked, ...props }, ref) => (
  
    
      
        
      
    
    {children}
  
))
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef,
  React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
  
    
      
        
      
    
    {children}
  
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef,
  React.ComponentPropsWithoutRef & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef,
  React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
  
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => {
  return 
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="app/issues/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Search, Tag, Milestone, Plus, CircleDot, MessageSquare, ChevronDown, Filter } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

const mockIssues = [
  {
    id: 47,
    title: "default template to prefill details/ duplicate existing invoices",
    author: "yashash-pugalia",
    avatar: "/legion-logo.png",
    timeAgo: "last week",
    comments: 1,
    labels: ["enhancement", "feature-request"],
  },
  {
    id: 46,
    title: "Optional tag light mode styles",
    author: "PickleNik",
    avatar: "/developer-avatar.png",
    timeAgo: "2 weeks ago",
    comments: 1,
    labels: ["ui", "styling"],
  },
  {
    id: 45,
    title: "UX Improvements",
    author: "Rutwik187",
    avatar: "/developer-with-glasses.png",
    timeAgo: "3 weeks ago",
    comments: 1,
    labels: ["ux", "enhancement"],
  },
  {
    id: 44,
    title: "Add dark mode support for invoice templates",
    author: "legions-developer",
    avatar: "/legion-logo.png",
    timeAgo: "1 month ago",
    comments: 3,
    labels: ["dark-mode", "feature"],
  },
  {
    id: 43,
    title: "Export invoice as PDF functionality broken",
    author: "dev-sarah",
    avatar: "/developer-avatar.png",
    timeAgo: "1 month ago",
    comments: 5,
    labels: ["bug", "pdf", "high-priority"],
  },
  {
    id: 42,
    title: "Add multi-currency support",
    author: "finance-guru",
    avatar: "/developer-with-glasses.png",
    timeAgo: "2 months ago",
    comments: 8,
    labels: ["enhancement", "currency", "feature-request"],
  },
  {
    id: 41,
    title: "Invoice numbering sequence reset issue",
    author: "accounting-pro",
    avatar: "/legion-logo.png",
    timeAgo: "2 months ago",
    comments: 2,
    labels: ["bug", "numbering"],
  },
  {
    id: 40,
    title: "Add email templates for invoice notifications",
    author: "email-master",
    avatar: "/developer-avatar.png",
    timeAgo: "3 months ago",
    comments: 4,
    labels: ["email", "templates", "enhancement"],
  },
  {
    id: 39,
    title: "Performance optimization for large invoice lists",
    author: "perf-optimizer",
    avatar: "/developer-with-glasses.png",
    timeAgo: "3 months ago",
    comments: 6,
    labels: ["performance", "optimization"],
  },
  {
    id: 38,
    title: "Add invoice status tracking and history",
    author: "status-tracker",
    avatar: "/legion-logo.png",
    timeAgo: "4 months ago",
    comments: 7,
    labels: ["tracking", "history", "feature"],
  },
]

export default function IssuesPage() {
  return (
    
      
        {/* Issues Header */}
        
          
            
              is:
              issue
              state:
              open
            
          
          
            
            
            
            
          
        

        {/* Issues Filter Bar */}
        
          
            
              
                
                
                
              
            
            
              
              
              
              
              
              
              
            

            
              
                
                  
                
                
                  Open all
                  Author
                  Labels
                  Projects
                  Milestones
                  Assignees
                  Newest
                
              
            
          

          
            {mockIssues.map((issue) => (
              
                
                  
                  
                  
                    
                      {issue.title}
                      
                        
                        {issue.comments}
                      
                    
                    
                      #{issue.id}
                      
                      
                        {issue.author} opened {issue.timeAgo}
                      
                    
                  
                
              
            ))}
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/pull-requests/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Search, Tag, GitPullRequest, X, ChevronDown, MessageSquare, GitMerge, Clock, Filter } from "lucide-react"

const pullRequests = [
  {
    id: 44,
    title: "Feat/make-invoice-end-date-optional",
    author: "legions-developer",
    avatar: "/legion-logo.png",
    status: "merged",
    mergedAt: "3 weeks ago",
    comments: 1,
    labels: ["enhancement"],
  },
  {
    id: 43,
    title: "feat: add sentry",
    author: "legions-developer",
    avatar: "/legion-logo.png",
    status: "merged",
    mergedAt: "3 weeks ago",
    comments: 1,
    labels: ["feature"],
  },
  {
    id: 41,
    title: "feat: migrate to vercel",
    author: "legions-developer",
    avatar: "/legion-logo.png",
    status: "merged",
    mergedAt: "last month",
    comments: 0,
    labels: ["deployment"],
  },
  {
    id: 42,
    title: "feat: Templating and Vercel theme invoice",
    author: "legions-developer",
    avatar: "/legion-logo.png",
    status: "merged",
    mergedAt: "last month",
    updatedAt: "last month",
    comments: 0,
    labels: ["feature", "ui"],
  },
  {
    id: 40,
    title: "feat: add sponsership page",
    author: "legions-developer",
    avatar: "/legion-logo.png",
    status: "merged",
    mergedAt: "Jul 5",
    comments: 1,
    labels: ["feature"],
  },
  {
    id: 39,
    title: "feat: new landing page",
    author: "legions-developer",
    avatar: "/legion-logo.png",
    status: "merged",
    mergedAt: "Jul 4",
    comments: 0,
    labels: ["ui", "enhancement"],
  },
  {
    id: 38,
    title: "fix: responsive design improvements",
    author: "legions-developer",
    avatar: "/legion-logo.png",
    status: "merged",
    mergedAt: "Jun 28",
    comments: 2,
    labels: ["bug", "ui"],
  },
  {
    id: 37,
    title: "feat: add dark mode toggle",
    author: "legions-developer",
    avatar: "/legion-logo.png",
    status: "merged",
    mergedAt: "Jun 25",
    comments: 3,
    labels: ["feature", "ui"],
  },
]

export default function PullRequestsPage() {
  const [searchQuery, setSearchQuery] = useState("sort:updated-desc is:pr is:closed")

  return (
    
      
        
          
            Label issues and pull requests for new contributors
            
              Now, GitHub will help potential first-time contributors{" "}
              
                discover issues
              {" "}
              labeled with{" "}
              
                good first issue
              
            
          
        

        
          

          
            
             setSearchQuery(e.target.value)}
              className="pl-10 bg-white border-gray-300 min-w-40"
              placeholder="Search pull requests..."
            />
          

           

          
        

        
          
          Clear current search query, filters, and sorts
        

        
          
            
              
                
                0 Open
              

              
                
                  
                
                40 Closed
              
            

            
              
              
              
              
              
              
              
              
            

            
              
                
                  
                
                
                  Open all
                  Author
                  Label
                  Projects
                  Milestones
                  Reviews
                  Assignee
                  Sort
                
              
            
          

          
            {pullRequests.map((pr) => (
              
                
                  

                  
                    
                      

                      
                        
                          
                            {pr.title}
                          
                          {pr.labels.map((label) => (
                            
                              {label}
                            
                          ))}
                        

                        
                          #{pr.id}
                          by
                          
                          {pr.author}
                          was merged {pr.mergedAt}
                          {pr.updatedAt && (
                            <>
                              
                              updated {pr.updatedAt}
                            
                          )}
                        
                      
                    
                  

                  {pr.comments > 0 && (
                    
                      
                      {pr.comments}
                    
                  )}
                
              
            ))}
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/repository-header.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import {
  Menu,
  Code,
  CircleDot,
  GitPullRequest,
  Search,
  Plus,
  Settings,
  Mail,
  RefreshCw,
  FolderKanban,
  Play,
  BookOpen,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { useState, useRef, useEffect } from "react"
import { motion } from "framer-motion"
import { usePathname, useRouter } from "next/navigation"

export function RepositoryHeader() {
  const pathname = usePathname()
  const router = useRouter()
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)

  const tabs = [
    { name: "Code", icon: Code, path: "/code", shortName: "Code" },
    { name: "Issues", icon: CircleDot, path: "/issues", shortName: "Issues", count: 3 },
    { name: "Pull requests", icon: GitPullRequest, path: "/pull-requests", shortName: "Pulls" },
    { name: "Actions", icon: Play, path: "/actions", shortName: "Actions" },
    { name: "Projects", icon: FolderKanban, path: "/projects", shortName: "Projects" },
    { name: "Wiki", icon: BookOpen, path: "/wiki", shortName: "Wiki" },
  ]

  const getActiveTab = () => {
    const currentTab = tabs.find((tab) => pathname === tab.path)
    return currentTab ? currentTab.name : "Code"
  }

  const [activeTab, setActiveTab] = useState(getActiveTab())
  const [indicatorStyle, setIndicatorStyle] = useState({ width: 0, left: 0, opacity: 0 })
  const tabRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({})

  useEffect(() => {
    setActiveTab(getActiveTab())
  }, [pathname])

  useEffect(() => {
    const updateIndicator = () => {
      const activeTabElement = tabRefs.current[activeTab]
      if (activeTabElement) {
        const { offsetLeft, offsetWidth } = activeTabElement
        setIndicatorStyle({ left: offsetLeft, width: offsetWidth, opacity: 1 })
      }
    }

    requestAnimationFrame(updateIndicator)
  }, [activeTab])

  const handleTabClick = (tab: (typeof tabs)[0]) => {
    setActiveTab(tab.name)
    router.push(tab.path)
  }

  return (
    
      {/* Desktop header */}
      
        
          
            

            

            /

            
              
            

            invoicely

            Private
          

          
            {/* Desktop CoPilot Pro section and action buttons - hidden on mobile */}
            
              
                
                  
                
                CoPilot Pro
              

              
                
                
                
                
                
              
            

            {/* Mobile menu button - only visible on mobile */}
            
              
                
              
              
                
                  Options
                

                
                  {/* CoPilot Pro section in mobile */}
                  
                    
                      
                    
                    CoPilot Pro
                  

                  {/* Action buttons in mobile */}
                  
                    
                    
                    
                    
                    
                  
                
              
            
          
        

        
          
            
              
                {tabs.map((tab) => {
                  const Icon = tab.icon
                  const isActive = activeTab === tab.name

                  return (
                    
                  )
                })}
              

              
            
          

          
            vercel.com/
            invoicely.gg
            
          
        
      

      {/* Mobile header */}
      
        
          
            

            

            /

            
              
            

            invoicely

            Private
          

          
            
              
            
            
              
                Options
              

              
                
                  
                    
                  
                  CoPilot Pro
                

                
                  
                  
                  
                  
                  
                
              
            
          
        

        {/* Mobile tab bar */}
        
          
            {tabs.map((tab) => {
              const Icon = tab.icon
              const isActive = activeTab === tab.name

              return (
                
              )
            })}
          
        
      
    
  )
}

Actions

Projects

Wiki

Settings

About

Contributors

Deployments

Languages

Invoicely Open Source

Invoicely - (Contributions Accepted)

🚀 Quick Start

Prerequisites

Installation

🛠️ Tech Stack

Core Framework

API & State Management

UI & Styling

Database & Authentication

File Storage & PDF

Development Tools

Analytics & Monitoring

Utilities

📁 Project Structure

{issue.title}

Label issues and pull requests for new contributors

{pr.title}

About

Tags

Share

About

Tags

Share

More from legiondev

More Templates Like This

About

Tags

Share

About

Tags

Share

More from legiondev

More Templates Like This